import React from 'react';
import '@/static/all.less'; //全局样式
import SaleHomePageStyle from '@/static/index.less'; //销售门户样式
import { Card } from 'antd';
import styles from '@/static/saleCard.less'; // 卡片样式
import Pie0 from '@/charts/pie'; //第一行 第一个 环形图 中间空洞 边框圆角
import Pie1 from '@/charts/pie1'; //第一行 第二个 环形图 中间填满
import Pie2 from '@/charts/pie2'; //第一行 第三个 环形图 中间空洞
import Bar0 from '@/charts/bar0'; //第二行 第一个 柱状图
import Line0 from '@/charts/line0'; //第二行 第二个 折线图
import Table from './table'; //第三行 销售门户表格
import { useHistory } from 'umi';

function Index() {
  const history = useHistory();
  return (
    <>
      {/* 布局 */}
      <div className={SaleHomePageStyle.globalPage}>
        {/* 第一行块 */}
        <div className={SaleHomePageStyle.firstDiv}>
          {/* 第一行 第一个环形图 */}
          <div className={SaleHomePageStyle.CardLayout0}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="客户来源统计"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码+
                      console.log('填写代码');
                      // 跳转 并 路由传值 传值为图表数据
                      history.push({
                        pathname: '/portal/sub-page/sub-sub-page3',
                        data: [
                          // 此处为数据
                          11111,
                        ],
                      });
                    }}
                  />
                </>
              }
            >
              {/* 存放环形图  第一行 第一个 */}
              <Pie0 />
            </Card>
          </div>
          {/* 第一行 第二个环形图 */}
          <div className={SaleHomePageStyle.CardLayout0}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="领用人员分布"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码
                      console.log('填写代码');
                    }}
                  />
                </>
              }
            >
              {/* 存放环形图 第一行 第二个  */}
              <Pie1 />
            </Card>
          </div>
          {/* 第一行 第三个环形图 */}
          <div className={SaleHomePageStyle.CardLayout0}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="价值评估统计"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码
                      console.log('填写代码');
                    }}
                  />
                </>
              }
            >
              {/* 存放环形图  第一行 第三个 */}
              <Pie2 />
            </Card>
          </div>
        </div>
        {/* 第二行块 */}
        <div className={SaleHomePageStyle.secondDiv}>
          {/* 第二行 第一个柱形图 */}
          <div className={SaleHomePageStyle.CardLayout1}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="客户分类统计"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码
                      console.log('填写代码');
                    }}
                  />
                </>
              }
            >
              {/* 存放环形图  第一行 第一个 */}
              <Bar0 />
            </Card>
          </div>
          {/* 第二行 第二个折线图 */}
          <div className={SaleHomePageStyle.CardLayout1}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="客户区域统计"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码
                      console.log('填写代码');
                    }}
                  />
                </>
              }
            >
              {/* 存放环形图  第一行 第二个 */}
              <Line0 />
            </Card>
          </div>
        </div>
        {/* 第三行块 */}
        <div className={SaleHomePageStyle.thirdDiv}>
          {/* 销售门户表格部分 */}
          <div className={SaleHomePageStyle.saleCardTable}>
            <Card
              headerStyle={{
                color: '#5377b6',
                borderBottom: '1px solid #b2b2b2',
                height: '40px',
              }}
              bodyClassName={styles.customBody}
              title="销售利润统计表 (从合同取数、按合同统计)"
              extra={
                <>
                  {/* 右上角橙色按钮 */}
                  <img
                    src={require('@/static/image/more_bg.gif')}
                    alt=""
                    className={SaleHomePageStyle.cardRightBtnImg}
                    onClick={() => {
                      // 此处填写跳转网页代码
                      console.log('填写代码');
                    }}
                  />
                </>
              }
            >
              {/* 表格 */}
              <Table />
            </Card>
          </div>
        </div>
      </div>
    </>
  );
}
export default Index;
